<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="content-section">
    <h2><i class="fas fa-hospital"></i> 科室病房情况</h2>
    <div class="ward-container">
        <div class="ward-filters">
            <select id="floorSelect" class="ward-select" onchange="updateWards()">
                <option value="">选择楼层</option>
            </select>
        </div>
        <div class="ward-table">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>楼层</th>
                        <th>病房号</th>
                        <th>总床位数</th>
                        <th>可用床位数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="wardTableBody">
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 加载楼层列表
    $.get('/0201/wardStatus', { action: 'getFloors' }, function(floors) {
        var select = $('#floorSelect');
        floors.forEach(function(floor) {
            select.append($('<option>', {
                value: floor,
                text: floor + '楼'
            }));
        });
    });

    // 加载所有病房数据
    loadAllWards();
});

function updateWards() {
    var floorNum = $('#floorSelect').val();
    if (floorNum) {
        $.get('/0201/wardStatus', {
            action: 'getWards',
            floorNum: floorNum
        }, updateTable);
    } else {
        loadAllWards();
    }
}

function loadAllWards() {
    $.get('/0201/wardStatus', updateTable);
}

function updateTable(wards) {
    var tbody = $('#wardTableBody');
    tbody.empty();

    wards.forEach(function(ward) {
        var row = $('<tr>', {
            'data-ward-id': ward.wardId
        });
        row.append($('<td>').text(ward.floorNum + '楼'));
        row.append($('<td>').text(ward.wardNum + '号'));
        row.append($('<td>').text(ward.bedCount));
        row.append($('<td>').text(ward.availableBeds));
        // 修改查看链接，传入wardId参数
        var viewLink = $('<a>', {
            href: 'javascript:void(0)',
            text: '查看',
            class: 'view-link',
            click: function() {
                viewWardDetail(ward.wardId, ward.floorNum, ward.wardNum);
            }
        });
        row.append($('<td>').append(viewLink));
        tbody.append(row);
    });
}

// 修改查看详情函数
function viewWardDetail(wardId, floorNum, wardNum) {
    // 获取病房详细信息
    $.get('/0201/wardDetail', { wardId: wardId }, function(beds) {
        // 创建一个模态框显示病房信息
        var modalContent = '<div class="modal-content">' +
            '<h3>' + floorNum + '楼 ' + wardNum + '号病房床位信息</h3>' +
            '<table class="data-table">' +
            '<thead><tr>' +
            '<th>床位号</th>' +
            '<th>状态</th>' +
            '<th>病人姓名</th>' +
            '</tr></thead><tbody>';
            
        beds.forEach(function(bed) {
            modalContent += '<tr>' +
                '<td>' + bed.bedNum + '号床</td>' +
                '<td>' + (bed.bedStatus === 1 ? '入住' : '空闲') + '</td>' +
                '<td>' + (bed.patientName || '-') + '</td>' +
                '</tr>';
        });
        
        modalContent += '</tbody></table></div>';
        
        // 显示模态框
        showModal(modalContent);
    });
}

// 添加显示模态框的函数
function showModal(content) {
    // 如果已存在模态框，先移除
    $('.modal-overlay').remove();
    
    // 创建模态框
    var modalHtml = '<div class="modal-overlay">' +
        '<div class="modal-wrapper">' +
        content +
        '<button class="modal-close" onclick="closeModal()">关闭</button>' +
        '</div></div>';
    
    $('body').append(modalHtml);
}

// 添加关闭模态框的函数
function closeModal() {
    $('.modal-overlay').remove();
}
</script>
